<template>
    <div>
        <div v-if="!editing">
            {{rowData[field]}}
        </div>
        <div v-else>
            <el-select v-model="rowData[field]" filterable multiple placeholder="请选择" v-if="optionNotObj !== undefined">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
            </el-select>
            <el-select v-model="rowData[value]" filterable multiple placeholder="请选择" @change="changeFn" v-else>
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ui-tr-edit-select-multiple',
        props: {
            editing: {},
            rowData: {},
            field: {},
            value: {},
            options: {},
            optionNotObj: {}
        },
        data() {
            return {
                cacheOptions: []
            }
        },
        mounted() {
            let _this = this;
            this.options.map(function (item) {
                _this.cacheOptions[item.value] = item.label
                return _this.cacheOptions[item.value]
            });
        },
        beforeDestroy() {

        },
        watch: {
            editing(v) {
                if (v) {
                    if (this.optionNotObj !== undefined) {
                        let field = this.rowData[this.field];
                        if (field && typeof field === 'string') {
                            this.rowData[this.field] = field.split(",");
                        }
                    } else {
                        let value = this.rowData[this.value];
                        if (value && typeof value === 'string') {
                            this.rowData[this.value] = value.split(",");
                        }
                    }
                } else {
                    if (this.optionNotObj !== undefined) {
                        let field = this.rowData[this.field];
                        if (field && typeof field === 'object') {
                            this.rowData[this.field] = field.join(",");
                        }
                    } else {
                        let value = this.rowData[this.value];
                        if (value && typeof value === 'object') {
                            this.rowData[this.value] = value.join(",");
                        }
                    }
                }
            }
        },
        methods: {
            changeFn(value) {
                let arr = [];
                let _this = this;
                value.map(function (item) {
                    arr.push(_this.cacheOptions[item]);
                });
                this.rowData[this.field] = arr.join(',');
            }
        }
    }
</script>
